<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../lib/bootstrap-3.3.5-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../css/caidanlan.css">
    <script src="../lib/bootstrap-3.3.5-dist/js/jquery-1.11.3.js"></script>
    <script src="../lib/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
    <script src="../javaScript/data_management.js"></script>
    <script src="../javaScript/utl.js"></script>
    <script src="../javaScript/quanxianpanduan.js"></script>
    <style>
        /* #yema{ */
            /* width: 280px; */
            /* height: 20px; */
            /* overflow: hidden; */
        /* } */
        #xiajiaobiao div{
            float: left;
            margin-left: 20px;
            /* background-color:#050505 ; */
            cursor:pointer;
            
        }
        #xiajiaobiao{
            margin-top: 45px;
            color: white;
        }
        .shujizhuangtai{
            /* background-color:#050505 ; */
        }
        #yema div{
            width: 20px;
            /* background-color: yellow; */
            text-align: center;
            border-radius: 8px;
            color: black;
        }
        .clear::after{
            content: "";
            display: block;
            clear: both;
        }
        #zbc{
            position: absolute;
            z-index: 100;
            background-color: rgba(0, 0, 0, 0.5);
            height: 100%;
            width: 100%;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            display: none;
        }
        .tanchukuang{
            height: 50%;
            width: 50%;
            margin: auto;
           margin-top: 20%;
           text-align: center;
           color: #999999;
          }
        .ti{
            height: 50px;
            background-color: #1F1F1F;
            line-height: 50px;
          
            border-radius: 10px 10px 0 0 ;
        }
        .tishi{
             height: 50px;
            /* background-color: #1F1F1F; */
            line-height: 50px;
            margin: 0 0;
            border-radius: 10px 10px 0 0 ;
        }
        .xuanzhe{
            width: 100%;
        }
        .tishi p{
            font-size: 16px;
        }
       .dibu{
            /* background-color: black; */
        }
        .xinxi{
            height: 80px;
            line-height: 80px;
        }
        .anniu{
            height: 160px;
            /* background-color: black; */
        }
      td{
        height: 30px;
      }
      #bianji{
          position: absolute;
          top: 0;
          bottom: 0;
          right: 0;
          left: 0;
          background-color: white;
          z-index: 101;

      }
      .xiugaikuang{
          width: 50%;
         
      }
      .xiugaikuang .tishi{
          text-align: center;
          color: #999999;
          
      }
      .op{
          width: 100%;
          border-radius: 5px;
          height: 30px;
         background-color: #FDBD04;
         border: 0px;
      }
      #bianji{
          display: none;
          
      }
      .mingzishuru,.shengri,.youxiang,.dizhi,.banzhengriqi,.jiezhiriqi{
          width: 100%;
          /* background-color: #050505; */
          border: 0px;
      }
      
      .kahaoshuru{
          width: 100%;
          /* background-color: #050505; */
          border: 0px;
      }
      .wenbenyu{
          padding: 5% 3%;
          /* background-color: #000000; */
          /*  */
        
      }
      .wenbenyu .row{
          /* background-color: #050505; */
          margin-bottom: 10px;
          height: 30px;
          line-height: 30px;
      }
      .bianjianniu{
          text-align: center;
          
      }
      .tupian{
        /* background-color: #050505; */
      }
     
     .tijiao{
         background-color:#F07639 !important ;
         border-radius: 20px;
     }
     .quxiao{
     background-color:#FDBD04 !important ;
     border-radius: 20px;
    }
    .ziti div:nth-child(1){
        color: #FDBD04;
    }
    .biaoge{
        /* background-color: #000000 ; */
        padding: 1% 2%;
        /* color: #999999; */
    }
    .shouye{
        height: 50px;
        line-height: 50px;
        /* background-color: #050505; */
        border-radius: 10px 10px 0 0 ;
        margin: 0;
        margin-bottom: 10px;
      
    }
    .xuanzhe{
        width: 100%;
        height: 50px;
        margin-top: 25px;
        line-height: 25px;
      
    }
    .you{
        float:right;
        border-radius: 2px;
        border: 0;
        background-color:#5CB85C !important ;
        color: white;
        width: 50px;
        /* color: black; */
    }
    .chaxun{
        margin-left: 5px;
    }
    #youbian{
       margin: 0;
    }
    .tijiaokuang input{
        /* background-color: #050505; */
        border: 0px;
        
    }
   table{
    text-align: center;
    /* background-color: #050505; */
    width: 100%;
   }
  .xm{
      width: 8%;
  }
  .js{
      width: 9%;
  }
  .sfz{
      width: 17%;
  }
  .yj{
      width: 7%;
  }
  .yqqf{
      width: 8%;
  }
  .kh{
      width: 10%;
  }
  .xb{
      width: 5%;
  }
  .bz{
      width: 10%;
  }
  .jz{
      width: 10%;
  }
  .zt{
      width: 6%;
  }
  .cz{
      width: 10%;
  }
  
  td .xiugai{
      background-color: #FDBD04 ;
      border: 0px;
      border-radius: 5px;
      color: white;
      font-size: 0.93em;
  }
  td #shanchu{
     background-color: #FF0000 ;
     border: 0px;
     border-radius: 5px;
     /* color: #000; */
     font-size: 0.93em;
    }
   table thead th{
       text-align: center;
   }
   tbody tr,th,td{
       border: black 1px solid;
   }
   .yemaxianshi,#shangyiye,#xiayiye,.tiaozhuan{
       background-color: #5CB85C !important;
       border-radius: 8px;
   }
   #tiaozhuanye{
       width: 30px;
       border-radius: 10px;
       border: 1px #050505 solid;
       color: black;
       
       /* background-color: #050505; */
   }
   .tzsy:hover{
      cursor :pointer;
      color: #63B34A;
  }
   
   
</style>
    
</head>
<body>
    
    <div class="container-fulid">
        <div class="row shouhang">
          <span class="iconfont icon-ziliaoku"></span>
          <p>图书馆后台管理系统</p>
          <div id='yonghu'>
          </div>
        </div>
        <div class="row">
          <div class="col-md-2 caidan">
            <a href="../html/jueseguanli.html">
              <p> 角色管理</p>
            </a>
            <a href="../html/guanliyuanguanli.html">
              <p>管理员管理</p>
            </a>
            <a href="./quanxianguanli.html">
              <p>权限管理</p>
            </a>
            <a href="../html/ReaderUser.html">
              <p>读者用户</p>
            </a>
            <a href="../html/duzhejuese.html">
              <p>读者角色</p>
            </a>
            <a href="../html/yuedu.html">
              <p>借阅查询</p>
            </a>
            <a href="../html/jieyueguanli.html">
              <p>借阅管理</p>
            </a>
            <a href="../html/book-management.html">
              <p>书刊管理</p>
            </a>
            <a href="../html/guancangdizhi.html">
              <p>馆藏地址管理</p>
            </a>
            <a href="../html/guancangfenlei.html">
              <p>馆藏分类管理</p>
            </a>
            <a href="../html/cengjiaLabel.html">
              <p>层架标签配置</p>
            </a>
            <a href="../html/fenguanshezhi.html">
              <p>分馆配置</p>
            </a>
            <a href="../html/book_inventory.html">
              <p>图书盘点</p>
            </a>
            <a href="../html/dindanguanli.html">
              <p>订单管理</p>
            </a>
            <a href="../html/tushuguanshezi.html">
              <p>图书馆设置</p>
            </a>
          </div>


        <div class="col-md-10 biaoge">
            <div>
                <div class="row shouye">
                    <div class="col-md-4"><span class='tzsy'>首页</span>>借阅查询</div>
                    <div class="col-md-8"></div>
                </div>
               
            <div class='xuanzhe row'>
                <div class="col-md-8 tijiaokuang">
                    <span>读者信息:</span><input type="text" class ='xinming'>
                    <span>书籍信息:</span><input type="text"  class ='kahao'>
                    <span>书籍状态</span><select class='shujizhuangtai'>
                        <option value="">全部</option>
                        <option value="">归还</option>
                        <option value="">借出</option>
                        <option value="">续期</option>
                        <option value="">逾期</option>
                        <option value="">丢失</option>
                        
                    </select>
                </div>
                <div class="col-md-4 anjian" >
                     
                    <button class="chaxun you">查询</button>
                    <button class="you duka">读卡</button>
                </div>
                
            </div>
           
                <table >
                    <thead>
                            <th class="xm">借阅状态</th>
                            <th class="js">读者编号</th>
                            <th class="sfz">卡号</th>
                            <th class="yj">姓名</th>
                            <th class="yqqf">书籍RFID</th>
                            <th class="kh">书名</th>
                            <th class="xb">借阅曰期</th>
                            <th class="bz">应还日期</th>
                            <th class="jz">续借次数</th>
                            <th class="zt">归还日期</th>
                        <th class="cz">操作</th>
                    </thead>
                    <tbody id="mybody"> 
                    </tbody>
                       
                </table>
                          
            <div id="xiajiaobiao" class="clear">
                 <div id='shangyiye'>
                     上一页
                 </div> 
                 <div id="yema">    
                 </div>
                 <div id="xiayiye">
                 下一页
                 </div> 
                 <div class="tiaozhuan">
                    跳转至
                 </div>
                 <div>
                 <input type="text" id="tiaozhuanye" >
                 </div>  
            </div>
        </div>
    </div>
</div>
</div> 
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               
<script>
    let myjyshuju =JSON.parse(getData('jyshuju'))
    let guanliname=glqx('借阅管理')

    function xuanran(data){
    $.each(data,(index,item)=>{
        $('#mybody').append(`
        <tr>
            <td class='ziti'>${item.jyzt}</td>
            <td>${item.dzbh}</td>
            <td class='zhnegjian'>${item.kh}</td>
            <td>${item.xm}</td>
            <td>${item.shuji}</td>
            <td>${item.sm}</td>
            <td>${item.jyrq}</td>
            <td>${item.yhrq}</td>
            <td>${item.xjcs}</td>
            <td>${item.ghrq}</td>
            <td>${item.cz}</td> 
        </tr> 
        `
        )
    })
        for(i=0;i< $('.ziti').length;i++){
            if( $('.ziti').eq(i).text()=='归还'){
            $('.ziti').eq(i).css('color','#05D0DC')
            }
            if($('.ziti').eq(i).text()=='丢失'){
            $('.ziti').eq(i).css('color','red')
            }
            if($('.ziti').eq(i).text()=='逾期'){
            $('.ziti').eq(i).css('color','#FDBD04')
        }
        }

    }
    let zuidayema
    var gengaihou = myjyshuju
    let zuihou = []
    let ye=1
    let m

    
    function fenye( num,data){
             for(i=0;i< $('#yema .xiaobiaoye').length;i++){
                $('#yema .xiaobiaoye').eq(i).css("background-color","white")}
                
              $('#mybody').html('')
              $('#yema .xiaobiaoye').eq(num-1).css("background-color","red")
            let qishi = (num-1)*10
            let fenyehou = data.slice(qishi,qishi+10)
           
            xuanran(fenyehou)
            if(fenyehou.length<16){
                for(let i=0;i<=16-fenyehou.length;i++){
                    $('#mybody').append(`
                    <tr>
                   <td></td>
                   <td></td>
                   <td></td>
                   <td></td>
                   <td></td>
                   <td></td>
                   <td></td>
                   <td></td>
                   <td></td>
                   <td></td>
                   <td></td>
                   
                   
                   
                </tr>`)
                }
            }
            ye=num
          
          }
          
         
    function xuanzheyema(data){
              $('#yema').html('')
                zuidayema = Math.ceil(data.length/10)
              for(let i=1;i<=zuidayema;i++){        
               
                if(zuidayema>=1000000){
                    if(i<=3){
                        $('#yema').append(`<div class="xiaobiaoye">${i}</div>`)  
                    }
                    if(i>zuidayema-3){
                     $('#yema').append(`<div class="xiaobiaoye">${i}</div>`) 
                     }
                    if(i>3&&i<=4){
                        $('#yema').append(`<div class="">...</div>`)
                       
                    }
                   
                   
                   
                     
                }else
                    $('#yema').append(`<div class="xiaobiaoye">${i}</div>`) 
                }
                
    }    
             

    $('#yema').on('click','.xiaobiaoye',function(){
        
        num =parseInt($(this).text())
        ye = num
        // $(this).css("background-color","red")
        fenye(num,gengaihou)
        
    })
    
    //在上一页之前添加一个显示页面数量的代码
    $('#shangyiye').before('<div class="yemaxianshi">10/页</div>')
    //下一页功能
    $('#xiayiye').click(function(){
    ye=ye+1
      if(ye<=zuidayema){
        fenye(ye,gengaihou)
    }
    })
    //上一页功能
    $('#shangyiye').click(function(){
    ye=ye-1
    if(ye>=1){
     fenye(ye, gengaihou)
    }
    })
  //跳转功能
    $('.tiaozhuan').click(function(){
      
     let tiaozhuan=  parseInt( $('#tiaozhuanye').val())
     fenye(tiaozhuan,gengaihou)

    })

    //查询功能
    $('.chaxun').click(function(){
        if(czqx(guanliname,'查询')){
          return
        }
        let duzhexinxi = $('.xinming').val()
         let shujixinxi = $('.kahao').val()
        let zhuangtai =  $(".shujizhuangtai").find("option:selected").text()
        // 
        // console.log($(".shujizhuangtai"));
        gengaihou=myjyshuju//重复查询让gengaigou成为一个变量
        if(duzhexinxi!=''){
            gengaihou=gengaihou.filter(item=>item.kh==duzhexinxi||item.xm==duzhexinxi)//
        }
        if(shujixinxi!=''){
            gengaihou=gengaihou.filter(item=>item.shuji==shujixinxi||item.sm==shujixinxi)
        }
        if(zhuangtai!=''){
            gengaihou=gengaihou.filter(item=>item.jyzt==zhuangtai)
            console,console.log(123);
        }
        xuanzheyema(gengaihou)//渲染初始页面
        fenye(1,gengaihou)
       
    })
    xuanzheyema(gengaihou)//渲染初始页面
    fenye(1,gengaihou)
    //修改读取数据功能
    let shuju
    let xiabiao 
$('#mybody').on('click','.xiugai',function(){
    if(czqx(guanliname,'编辑')){
          return
        }
       
  $('#bianji').css('display','block')
  // $('.in').attr('checked','checked' )
  // console.log(JSON.parse($(this).parent().parent().children().text()))
   shuju =JSON.parse($(this).attr('data-shuju'))
   xiabiao =JSON.parse($(this).attr('data-xiabiao'))
  $('.mingzishuru').val( shuju.name)
  $('.kahaoshuru').val( shuju.kahao)
  $('.banzhengriqi').val(shuju.kaishiriqi)
  $('.jiezhiriqi').val(shuju.jiezhiriqi)
    let n = shuju.shenfen 
    var str = n.toString()
    let array= str.split("")
    let nianfen=array.slice(6,10)
    let yuefen = array.slice(10,12)
    let riqi = array.slice(12,14)
    let mn = nianfen.join('')
    let my = yuefen.join('')
    let mr = riqi.join('')
    shengri=mn+'-'+my+'-'+mr
    $('.shengri').val(shengri)

   
      
  for(let i=0;i<$('.huiyuan div').length;i++){
    if($('.huiyuan div').eq(i).text()==shuju.jiaose){
        $('.huiyuan div').children().prop('checked',false)
        $('.huiyuan div').eq(i).children().prop('checked',true)//用户状态的获取
    }
  }
  for(let k=0;k<('.xin div').length;k++){
      if($('.xin div').eq(k).text()==shuju.xingbie){
        $('.xin div').children().prop('checked',false)
        $('.xin div').eq(k).children().prop('checked',true)//用户状态的获取 
    }
  }

    $('.quxiao').click(function(){
        $('#bianji').css('display','none')
        xuanzheyema( gengaihou)
        fenye(1, gengaihou)
    })
})
    $('.duka').click(function(){
        gengaihou=myjyshuju
        xuanzheyema(gengaihou)
        fenye(1,gengaihou)  
      })
    $('.tijiao').click(function(){//给模态框的确认键绑定点击事件
    console.log(123)
    // 
    // for(let i=0;i<gengaihou.length;i++){
        // if(gengaihou[i].shenfen==shuju.shenfen){
          myjyshuju[xiabiao].name=$('.mingzishuru').val()
          myjyshuju[xiabiao].kahao=$('.kahaoshuru').val()
           for(let k=0;k<$('.huiyuan div').length;k++){
               if($('.huiyuan div').eq(k).children().prop('checked')){
                   myjyshuju[xiabiao].jiaose =$('.huiyuan div').eq(k).text()
                   break
               }
           }
           for(let k=0;k<$('.xin div').length;k++){
            if($('.xin div').eq(k).children().prop('checked')){
                myjyshuju[xiabiao].xingbie =$('.xin div').eq(k).text()
                break
                }
        }
          gengaihou=myjyshuju
           $('#bianji').css('display','none')
           xuanzheyema( gengaihou)
           fenye(1, gengaihou)
              
           
   })


   $('.tzsy').click(function(){
 location.href ='./shouye.html'
 })






     </script>
     
</body>
</html>